<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Searchable Map Template - CSV</title>

    <meta charset='utf-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta content='You want to put your data on a searchable, filterable map. Provide a comma separated file (CSV) and this free, open source template will do the rest.' name='description'>
    <meta content='Searchable Map Template - CSV' name='author'>

    <!-- Facebook metadata -->
    <meta content="Searchable Map Template - CSV" property="og:site_name">
    <meta content="Searchable Map Template - CSV" property="og:title">
    <meta content="website" property="og:type">
    <meta content="You want to put your data on a searchable, filterable map. Provide a comma separated file (CSV) and this free, open source template will do the rest." property="og:description">
    <meta content="https://searchable-map-template-csv.netlify.com/" property="og:url">
    <meta content="https://searchable-map-template-csv.netlify.com/img/screenshot.jpg" property="og:image">
    
    <!-- Twitter metadata -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@DataMadeCo">
    <meta name="twitter:creator" content="@DataMadeCo">
    <meta name="twitter:title" content="Searchable Map Template - CSV">
    <meta name="twitter:url" content="https://searchable-map-template-csv.netlify.com/">
    <meta name="twitter:description" content="You want to put your data on a searchable, filterable map. Provide a comma separated file (CSV) and this free, open source template will do the rest.">
    <meta name="twitter:image:src" content="https://searchable-map-template-csv.netlify.com/img/screenshot.jpg">

    <!-- Styles -->
    <!-- Bootstrap cssS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/custom.css"/>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script src="lib/popper.min.js"></script>
    <script src="lib/bootstrap.min.js"></script>

    <script src="lib/ejs.min.js"></script>
    <script src="lib/jquery.address.js"></script>
    <script src="lib/jquery.csv.min.js"></script>
    <script src="lib/moment.js"></script>
    <script src="lib/geojson.min.js"></script>
    <script src="js/csv-to-geojson.js"></script>

    <!-- Leaflet and Google -->
    <link rel="stylesheet" href="css/leaflet.css"/>
    <script src="lib/leaflet.js"></script>
    <script src='lib/turf.min.js'></script>
    <script src="https://maps.google.com/maps/api/js?libraries=places&key=AIzaSyBhlf7Ayk_8nYYW5siUMTXXwvI-A6va_m0"></script>
    <script src="lib/Leaflet.GoogleMutant.js" ></script>
    <script src="lib/leaflet-color-markers.js" ></script>
    
    <!-- Custom JavaScript -->
    <script src="js/searchable_map_lib.js"></script>
    <script src="js/analytics_lib.js"></script>

  </head>
  <body>

    <nav class="navbar navbar-expand-md navbar-light mb-2">
      <a class="navbar-brand" href="/">
        Searchable Map Template - CSV
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse mr-auto" id="navbarsExampleDefault">
        <ul class="navbar-nav ml-auto">
          <li class='nav-item'>
            <a class="nav-link active" href="/"><i class="fa fa-map-marker" aria-hidden="true"></i> Map</a>
          </li>
          <li class='nav-item'>
            <a class="nav-link" href="/about.html"><i class="fa fa-info-circle" aria-hidden="true"></i> About</a>
          </li>
        </ul>
      </div>
    </nav>

    <main role="main" class="container-fluid">

      <div class='row'>
        <div class="col-md-4">
          <p>You want to put your data on a searchable, filterable map. Provide a comma separated file (CSV) and this free, open source template will do the rest. <br /><a href='/about.html'>Read more &raquo;</a></p>

          <div class="card bg-light">
            <div class="card-body">
              <div class='row'>
                <div class="col-md-8">
                  <div class="form-group">
                      Near an address
                      <input class='form-control' id='search-address' placeholder='Enter an address' type='text'>
                  </div>
                </div>

                <div class="col-md-4">
                  <div class='form-group'>
                      Within
                      <select id='search-radius' class='form-control'>
                        <option value='400'>2 blocks</option>
                        <option value='805'>1/2 mile</option>
                        <option value='1610'>1 mile</option>
                        <option value='3220'>2 miles</option>
                        <option value='8050'>5 miles</option>
                      </select>
                  </div>
                </div>
              </div>

              <div class='row'>
                <div class="col-md-12">
                  <div class="form-group">
                      Search by name
                      <input class='form-control' id='search-name' placeholder='Enter a business or organization name' type='text'>
                  </div>
                </div>
              </div>

              <button class='btn btn-primary' id="btnSearch"><i class='fa fa-search'></i> Search</button>
              <a href="/" class='btn btn-secondary' id="btnReset" title="Reset"><i class="fa fa-repeat" aria-hidden="true"></i> Reset</a>
              <button class='btn btn-dark' id='btnViewMode' title='Change view'><i class='fa fa-list'></i> List view</button>

              </div>
            </div>
          </div>

          <div class='col-md-8'>
            <div id='mapCanvas' style="display: block; height: 1000px;"></div>
            <div id="listCanvas" style="display: none">
              <h2 class='list-header hidden-xs'>Search results <small id='list-result-count'></small></h2>
              
              <div class="table-responsive">
                <table class="table">
                  <thead>
                    <tr>
                      <th scope="col">Location</th>
                      <th scope="col">Address</th>
                      <th scope="col">Phone</th>
                      <th scope="col">Hours</th>
                    </tr>
                  </thead>
                  <tbody id='results-list'></tbody>
                </table>
              </div>
            </div>
            <p class='float-right'>Based on <a href='https://github.com/datamade/searchable-map-template-csv' target='_blank'>Searchable Map Template - CSV</a> by <a href='https://derekeder.com/' target='_blank'>Derek Eder</a> and <a href='https://datamade.us/' target='_blank'>DataMade</a></p>
          </div>
        </div>

        <div class="modal fade" id="modal-pop" tabindex="-1" role="dialog">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-body">
                <div class="container-fluid bd-example-row">
                  <div class="row">
                    <div class="col-md-12">
                      <button type="button" class="close close-btn" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fa fa-times-circle" aria-hidden="true"></i></span></button>
                      <div id="modal-main"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div><!-- /.modal-content -->
          </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

        <script type="text/javascript" src="js/map.js"></script>

    </main>
  </body>
</html>